<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
    <view class="login-container">
        <h2>登录</h2>
        <form>
            <view class="uni-form-item ">
                <view class="title">用户名</view>
                <input class="uni-input" name="input" v-model="userInfo.username" placeholder="输入用户名"/>
            </view>

            <view class="uni-form-item ">
                <view class="title">密码</view>
                <input class="uni-input" v-model="userInfo.password" :password="true" placeholder="输入密码"/>
            </view>
            <view class="uni-btn-v">
                <button type="primary" @click="login">登录</button>
            </view>
        </form>
    </view>

</template>


<script>
export default {
    data() {
        return {
            userInfo: {
                username: '',
                password: ''
            }
        }
    },
    methods: {
        login() {
            uni.request({
                url: "http://localhost:8000/api/login",
                method: 'POST',
                data: {
                    ...this.userInfo
                },
                success: (e) => {
                    if (e.data.status === 'success') {
                        //保存token
                        uni.setStorageSync('token', e.data.token);
                        uni.showToast({
                            title: '登录成功',
                        })
                        //跳转到分页
                        uni.navigateTo({ url: '/pages/loadMore/loadMore' })
                        console.log('success')
                    } else {
                        console.log('fail')
                    }
                }
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.login-container {
    padding: 50px 20px;

    h2 {
        text-align: center;
        margin-bottom: 40px;
    }

    .uni-form-item {
        margin-left: 20px;
        margin-bottom: 20px;

        .title {
            margin-bottom: 10px;
        }
    }

}

</style>
